<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-box">
			<view class="search-input">
				<text class="iconfont icon-search"></text>
				<input 
					type="text" 
					v-model="keyword" 
					placeholder="搜索商品" 
					confirm-type="search"
					focus
					@confirm="search"
				/>
				<text class="clear-icon iconfont icon-close" v-if="keyword" @click="clearKeyword"></text>
			</view>
			<view class="cancel-btn" @click="goBack">取消</view>
		</view>
		
		<!-- 搜索历史 -->
		<view class="history-box" v-if="!keyword && searchHistory.length > 0">
			<view class="history-header">
				<text class="title">搜索历史</text>
				<text class="clear" @click="clearHistory">清除</text>
			</view>
			<view class="history-list">
				<view 
					class="history-item" 
					v-for="(item, index) in searchHistory" 
					:key="index"
					@click="useHistoryItem(item)"
				>
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		
		<!-- 热门搜索 -->
		<view class="hot-box" v-if="!keyword">
			<view class="hot-header">
				<text class="title">热门搜索</text>
			</view>
			<view class="hot-list">
				<view 
					class="hot-item" 
					v-for="(item, index) in hotList" 
					:key="index"
					@click="useHistoryItem(item)"
				>
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		
		<!-- 搜索结果 -->
		<view class="result-box" v-if="keyword && searchResult.length > 0">
			<view 
				class="result-item" 
				v-for="(item, index) in searchResult" 
				:key="index"
				@click="goDetail(item)"
			>
				<image :src="item.image" mode="aspectFill"></image>
				<view class="info">
					<text class="name">{{ item.name }}</text>
					<view class="price-box">
						<text class="price">¥{{ item.price }}</text>
						<text class="sales">已售{{ item.sales }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 无搜索结果 -->
		<view class="empty-box" v-if="keyword && searchResult.length === 0 && !loading">
			<image src="/static/images/empty.png" mode="aspectFit"></image>
			<text>没有找到相关商品</text>
		</view>
		
		<!-- 加载中 -->
		<view class="loading-box" v-if="loading">
			<text>正在加载...</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			searchHistory: [],
			hotList: [
				'草莓',
				'牛肉',
				'鲜虾',
				'牛奶',
				'香蕉',
				'鸡蛋'
			],
			searchResult: [],
			loading: false
		}
	},
	onLoad() {
		// 获取搜索历史
		const history = uni.getStorageSync('searchHistory');
		if (history) {
			this.searchHistory = JSON.parse(history);
		}
	},
	methods: {
		search() {
			if (!this.keyword.trim()) {
				uni.showToast({
					title: '请输入搜索关键词',
					icon: 'none'
				});
				return;
			}
			
			// 添加到搜索历史
			this.addToHistory(this.keyword);
			
			// 执行搜索
			this.getSearchResult();
		},
		clearKeyword() {
			this.keyword = '';
			this.searchResult = [];
		},
		goBack() {
			uni.navigateBack();
		},
		clearHistory() {
			uni.showModal({
				title: '提示',
				content: '确定要清除搜索历史吗？',
				success: (res) => {
					if (res.confirm) {
						this.searchHistory = [];
						uni.removeStorageSync('searchHistory');
					}
				}
			});
		},
		useHistoryItem(item) {
			this.keyword = item;
			this.search();
		},
		addToHistory(keyword) {
			// 如果已经存在，则删除旧的
			const index = this.searchHistory.indexOf(keyword);
			if (index !== -1) {
				this.searchHistory.splice(index, 1);
			}
			
			// 添加到最前面
			this.searchHistory.unshift(keyword);
			
			// 最多保存10条
			if (this.searchHistory.length > 10) {
				this.searchHistory.pop();
			}
			
			// 保存到本地
			uni.setStorageSync('searchHistory', JSON.stringify(this.searchHistory));
		},
		getSearchResult() {
			this.loading = true;
			
			// 模拟搜索结果
			setTimeout(() => {
				this.searchResult = [
					{
						id: 1,
						name: '新鲜草莓',
						price: '38.8',
						sales: 999,
						image: '/static/product/strawberry.jpg'
					},
					{
						id: 2,
						name: '有机生菜',
						price: '12.8',
						sales: 888,
						image: '/static/product/lettuce.jpg'
					},
					{
						id: 3,
						name: '精选牛肉',
						price: '88.8',
						sales: 777,
						image: '/static/product/beef.jpg'
					},
					{
						id: 4,
						name: '深海鲜虾',
						price: '68.8',
						sales: 666,
						image: '/static/product/shrimp.jpg'
					}
				];
				
				this.loading = false;
			}, 500);
		},
		goDetail(item) {
			uni.navigateTo({
				url: `/pages/product/detail?id=${item.id}`
			});
		}
	}
}
</script>

<style lang="scss">
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.search-box {
	padding: 20rpx 30rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 999;
	
	.search-input {
		flex: 1;
		display: flex;
		align-items: center;
		height: 70rpx;
		padding: 0 30rpx;
		background: #f0f0f0;
		border-radius: 35rpx;
		
		.icon-search {
			font-size: 36rpx;
			color: #999;
			margin-right: 10rpx;
		}
		
		input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
			color: #333;
		}
		
		.clear-icon {
			font-size: 36rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
	
	.cancel-btn {
		font-size: 28rpx;
		color: #666;
		margin-left: 20rpx;
	}
}

.history-box,
.hot-box {
	padding: 20rpx 30rpx;
	background-color: #fff;
	margin-top: 20rpx;
	
	.history-header,
	.hot-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}
		
		.clear {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.history-list,
	.hot-list {
		display: flex;
		flex-wrap: wrap;
		
		.history-item,
		.hot-item {
			padding: 10rpx 30rpx;
			border-radius: 30rpx;
			background-color: #f0f0f0;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			
			text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}

.result-box {
	padding: 20rpx;
	
	.result-item {
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		
		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
		}
		
		.info {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.name {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
				margin-bottom: 10rpx;
			}
			
			.price-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.price {
					font-size: 32rpx;
					font-weight: bold;
					color: #ff5151;
				}
				
				.sales {
					font-size: 22rpx;
					color: #999;
				}
			}
		}
	}
}

.empty-box,
.loading-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
	
	image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 20rpx;
	}
	
	text {
		font-size: 28rpx;
		color: #999;
	}
}
</style> 